<template>
  <div class="container">
    <!-- 左侧分类导航和轮播-->
    <HomeCateGory />
    <HomeBanner />
    <!-- 新鲜好物 -->
    <HomeNew />
    <HomeHot />
    <!-- 商品楼层区块 -->
    <HomeProduct />
    <!-- <HomeGoods /> -->
  </div>
</template>

<script>
// 导入分类和轮播组件
import HomeCateGory from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeProduct from './components/home-product.vue'
import { getCurrentInstance, onMounted } from 'vue'
export default {
  components: {
    HomeCateGory,
    HomeBanner,
    HomeNew,
    HomeHot,
    HomeProduct
  },
  data () {
    return {
      url: 'url'
    }
  },
  created () {
    // vue2获取全局属性
    console.log('获取全局属性', this, this.load, this.url)
  },
  setup () {
    onMounted(() => {
      const thisVue = getCurrentInstance()
      console.log('v3组件实例', thisVue.load, thisVue.url)
    })
    return {}
  }
}
</script>

<style lang="less" scoped>
// 手动引入less文件 => 使用里边定义的less全局变量
// @import "~@/styles/variables.less";
// .container {
//   border: 2px solid @xtxColor;
// }
</style>
